<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8"%>
<%@ include file="/common/jsp/declare.jsp" %>

<!DOCTYPE html>
<html>
<head>
	<base href="<%=basePath %>" />
	<title>注册-房客</title>
	<%@ include file="/common/jsp/common.jsp" %>
	
	<script>
	var canClick = true;// 能否点的标识
	var thisSecond = 0;// 开始秒数
	var secondToEnable = 180;// 多少秒后可以重新点击
	function getCode(dom) {
		if (!canClick)
			return;

		var phone = $("#phone").val();
		if (!phone || !validatePhone(phone)) {
			jAlert("请输入正确的手机号");
			return;
		}
		var idcard = $("#idcard").val();
		if (!idcard) {
			jAlert("请输入身份证");
			return;
		}
		canClick = false;
		doAjax({
			url: "mvc/renter/getCode.htm",
			data: {
				phone: phone,
				idcard: idcard
			},
			success: function(json) {
				if(json == true) {
					jAlert("验证码发送成功。");
					$(dom).addClass("but-disable");
					intervalToClick(dom);
				} else if (json != false) {
					jAlert(json);
					canClick = true;
				} else {
					jAlert("验证码发送失败，请稍后再试。");
					canClick = true;
				}
			},
			error: function(json) {
				canClick = true;
			}
		});
	}
	function intervalToClick(dom) {
		if (thisSecond < secondToEnable) {
			$(dom).attr("value", secondToEnable - thisSecond++ + "秒后重发");
			window.setTimeout(function(){
				intervalToClick(dom);
			}, 1000);
		} else {
			$(dom).attr("value", "获取验证码");
			thisSecond = 0;
			canClick = true;
			$(dom).removeClass("but-disable");
		}
	}
	
	function validateData() {
		var nameL = $("#nameL").val();
		var phone = $("#phone").val();
		var idcard = $("#idcard").val();
		var code = $("#code").val();
		
		if (!nameL) {
			jAlert("姓名不能为空");
			return false;
		}
		if (!phone) {
			jAlert("手机号不能为空");
			return false;
		}
		if (!validatePhone(phone)) {
			jAlert("手机号格式不正确");
			return false;
		}
		if (!idcard) {
			jAlert("身份证不能为空");
			return false;
		}
		if (!validateCode(code)) {
			jAlert("验证码格式不正确");
			return false;
		}
		
		var validateSuccess = false;
		doAjax({
			url: "mvc/main/validateCode.htm",
			data: { code: code },
			async: false,
			success: function(json){
				if (json)
					validateSuccess = json;
				else
					jAlert("验证码不正确");
			}
		});
		return validateSuccess;
	}
	</script>
</head>
<body class="frame bgcolor">
	<div class="center">
		<div class="white-holder-h"></div>

		<form action="mvc/renter/register.htm" method="post" class="form" onsubmit="return validateData();">
			<input type="hidden" name="fromUserName" value="${param.fromUserName }" />
			<div class="row">
				<input type="text" id="nameL" name="nameL" value="${renterInfo.namel }" placeholder="请输入姓名" maxlength="20" class="input" />
			</div>
			<div class="row">
				<input type="text" id="phone" name="phone" value="${renterInfo.phone }" placeholder="请输入手机号" maxlength="11" class="input" />
			</div>
			<div class="row">
				<input type="text" id="idcard" name="idcard" value="${renterInfo.idcard }" placeholder="请输入身份证" maxlength="18" class="input" />
			</div>
			<div class="row">
				<input type="text" id="enote" name="enote" value="${renterInfo.enote }" placeholder="请输入电子便签" maxlength="50" class="input" />
			</div>
			<div class="row">
				<input type="button" value="获取验证码" class="getCodeBut fr" onclick="getCode(this)" />
				<div class="verificationCodeFixed">
					<input type="text" id="code" name="code" placeholder="请输入验证码" class="verificationCode" />
				</div>
			</div>
			<div class="row">
				<input type="submit" value="注册" class="register" />
			</div>
		</form>
	</div>
</body>
</html>
